<template>
	<view class="page">
		<view class="top">
			<view class="title">
				标题
			</view>
			<view class="u_input">
				<u-input class="input" v-model="title" type="type" :border="border" placeholder-style="color: #FFD4A5"
					border-color="#FFD4A5" clearable="true"/>
			</view>
		</view>
		<view class="bgimg">
			<view class="image">
				<view class="img_name">
					图片
				</view>
				<!-- <view class="duration" @click="redact">
					设置时长
				</view> -->
			</view>
			<view class="uploadTwo">
				<view style="margin: 10rpx;" v-for="(item,index) in fileListImg" :key="index">
					<image class="del-icon" @click="del_img(index)" mode="widthFix" src="../../static/img/del_icon.png" />
					<image class="pushImg" :src="item.img_url" mode="" @click="previewImg(index)"></image>
				</view>

				<view class="iconn" @click="uploadFileForImg" v-if="fileListImg.length!=9">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
			<!-- <view class="upload">
					<u-upload :action="action" :file-list="fileListImg" max-count="9" @on-remove="onRemove" show-progress="false"></u-upload>
			</view> -->
		</view>
		<view class="bgimg">
			<view class="image">
				<view class="img_name">
					视频
				</view>
			</view>
			<view class="uploadTwo">
				<view style="margin: 10rpx;" v-for="(item,index) in videoData" :key="index">
					<image class="del-icon" @click="handleDelForVideo(index)" mode="widthFix" src="../../static/img/del_icon.png" />
					<video class="videourl" :src="item.video_url" controls></video>
				</view>

				<view class="iconn" @click="uploadvideo" v-if="videoData.length!=9">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
		</view>
		<u-popup width="700rpx" height="500rpx"  v-model="show" mode="center">
			<view class="popup" catchtouchmove="true">
				<view class="popup_title">
					<span class="popup_title_textOne">调整图片的播放时长</span>
				</view>
				<view class="popup_number_box">
					<view class="minus" @click="reduce">
						<u-icon name="minus"></u-icon>
					</view>
					<view class="number">
						<u-input v-model="num" type="number" :border="border" :placeholder="null" input-align="center" :clearable='false'/>
					</view>
					<view class="plus" @click="increase">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
				<view class="popup_time">
					<span>单位：s（秒）</span>
				</view>
				<view class="popup_bottom">
					<view class="popup_bottom_left" @click="cancel">
						取消
					</view>
					<view class="popup_bottom_right" @click="ensure">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<view class="" style="height: 180rpx;"></view>
		<view class="bottom" @click="send">
		  <view class="bottom_but">
		    <span class="bottom_but_text">确定</span>
		  </view>
		</view>
	</view>
</template>

<script>
	import {UPLOAD_IMG, UPLOAD_VIDEO} from "../../api";
export default{
	name:'newContent',
	data(){
		return{
			show:false,
			title:'',
			value:'',
			num:0,
			autoHeight: true,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			action: '',
			fileList: [],
			fileListImg:[],
			uploadVideo: UPLOAD_VIDEO,
			uploadUrl: UPLOAD_IMG,
			videoData:[],
			imgFileList:[],
      videoIds:[],
      imageIds:[],
		}
	},
	onLoad(options) {
		const myData = JSON.parse(decodeURIComponent(options.item))
		this.title = myData.content_name
		this.id = myData.id
		console.log(myData,'44')
	},
	mounted() {

	},
	methods:{
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		redact(){
			this.show = true;
		},
		cancel(){
			this.num = 0
			this.show = false
		},
		ensure(){
			let number = /^[0-9]\d*$/
			if(!number.test(this.num)){
				uni.showToast({
				    title: '播放时长必须为整数',
				    duration: 2000,
					icon:'none'
				});
			}else{
				this.show = false
			}
		},
		//减少
		reduce(){
			if(this.num!=0){
				this.num--
			}else{
				uni.showToast({
				    title: '播放时长不能少于0秒',
				    duration: 2000,
					icon:'none'
				});
			}
		},
		//增加
		increase(){
			this.num++
		},
		onRemove(index, lists) {
			console.log('图片已被移除')
		},
		// 预览图片
		previewImg(index) {
		    const currentUrl = this.fileListImg[index].img_url;
				const urls = this.fileListImg.map(item => {
					return item.img_url
				});
		    wx.previewImage({
					current: currentUrl,
					urls: urls,
		    })
		},
		// 删除视频
		handleDelForVideo(index) {
		    this.videoData.splice(index, 1);
		},
		//删除图片
		del_img(index){
			this.fileListImg.splice(index, 1);
		},
		//上传视频
		uploadvideo(){
			wx.chooseMedia({
			    count: 9,//最大上传个数
			    mediaType: ["video"],//选择文件类型
			    sourceType: ["album", "camera"],//图片来源（相册、拍摄）
			    camera: "back",//前置摄像头（front后置摄像头）
			    maxDuration: 60,//拍摄时长 3s~60s
			    sizeType: [],//仅对image有效
			    success: res => {
			        const _fileList = res.tempFiles;
			        this.fileList.push(..._fileList);

			        for (let item of _fileList.values()) {
			            item.fileType = res.type;
			            item.progress = 0;
			            item.showProgress = true;
			            let apiURL, params;
			            apiURL = this.uploadVideo;//接口地址
			            params = "video";

                  uni.showLoading({
                    title: '上传中...'
                  });
			            const uploadTask = wx.uploadFile({
			                url: this.uploadVideo,
			                filePath: item.tempFilePath,
			                name: params,
			                success: async res => {
                        uni.hideLoading();
			                    const data = JSON.parse(res.data);
			                    data.data.fileType = 'video';
								          this.videoData.push({video_url:data.data.video_url})
			                    this.fileList.push(data.data.data);

                          if (this.videoIds.indexOf(data.data.id) == -1) {
                            this.videoIds.push(data.data.id);
                          }
			                },
			                fail: err => {
                        uni.hideLoading();
			                    console.log(err)
			                }
			            })
			            uploadTask.onProgressUpdate(res => {
			                item.progress = res.progress;
			                if (item.progress === 100) {
			                    item.showProgress = false;
			                }
			            })
			        }
			    },
			    fail: err => {
			        console.log(err);
			    }
			})
		},

		//上传图片
		uploadFileForImg() {

			wx.chooseMedia({
				count: 1,
				mediaType: ["image"],
				sourceType: ["album", "camera"],
				camera: "back",
				maxDuration: 60,
				sizeType: [],
				success: res => {
					const _fileList = res.tempFiles;
					this.imgFileList.push(..._fileList);

					for (let item of _fileList.values()) {
						item.fileType = res.type;
						item.progress = 0;
						item.showProgress = true;
						let apiURL, params;
						apiURL = this.uploadUrl;
						params = "photo"

            uni.showLoading({
              title: '上传中...'
            });
						const uploadTask = wx.uploadFile({
							url: this.uploadUrl,
							filePath: item.tempFilePath,
							name: params,
							success: async res => {
                uni.hideLoading();
								const data = JSON.parse(res.data);
								data.data.fileType = item.fileType;
								data.data.time = 0;
								this.fileListImg.push({img_url:data.data.img_url})
								console.log(this.fileListImg,'图片')
								this.imgFileList.push(data.data);

                if (this.imageIds.indexOf(data.data.id) == -1) {
                  this.imageIds.push(data.data.id);
                }
							},
							fail: err => {
                uni.hideLoading();
								console.log(err)
							}
						})
						uploadTask.onProgressUpdate(res => {
							item.progress = res.progress;
							if (item.progress === 100) {
								item.showProgress = false;
							}
						})
					}
				},
				fail: err => {
					console.log(err);
				}
			})

		},
    async send(){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "image_ids":this.imageIds,
        "video_ids":this.videoIds,
        "title":this.title
      }

      let res=await this.$api.setSzContent(params)
      if(res.data.level == "success"){
        uni.showToast({
          title: '设置成功',
          duration: 2000,
        });
        setTimeout(() =>{
          uni.redirectTo({
            url:'/pages/contentPreview/preview?model_type=sz_content'
          })
        },2100)
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    }
	}
}
</script>

<style scoped lang="scss">
	.page{
		background-color: #fdc986;
		min-height: 100vh;
		overflow: hidden;
	}
	.top{
		height: 150rpx;
		background-color: #7F090B;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title{
		color: #FFD4A5;
		width: 10%;
		font-size: 35rpx;
		font-weight: 500;
	}
	.u_input{
		background-color: #7F090B;
		width: 70%;
		margin-left: 50rpx;

	}

	.u_input{
		 /deep/ .input{
			.u-input__input{
				color: #FFD4A5 !important;
			}
		}

	}
	.u_inputTwo{
		background-color: #7F090B;
		width: 91%;
		margin-left: 50rpx;
	}
	.bgimg{
		background-color: #7F090B;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		// height: 430rpx;
	}
	.image{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.img_name{
		color: #FFD4A5;
		font-size: 35rpx;
		font-weight: 500;
		width: 22%;
		text-align: center;
		margin-top: 50rpx;
	}
	.duration{
		color: #FFECD6 ;
		margin-top: 50rpx;
		width: 22%;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
	}
	/deep/.u-list-item.data-v-49deb6f2 {
		background-color: #EBB27F;
	}
	/deep/.u-icon__icon{
		color: #7F090B;
	}
	/deep/.u-add-tips{
		color: #7F090B;
	}
	/deep/.u-preview-image{

	}
	// .wrap_right_bottom_scroll{
	// 	height: 300rpx;
	// 	margin-top: 20rpx;
	// }
	.upload{
		margin-top: 30rpx;
		margin-left: 40rpx;
		// width: 20%;
	}
	.uploadTwo{
		margin-top: 50rpx;
		margin-left: 40rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap:wrap;
	}
	.del-icon {
	    position: absolute;
	    z-index: 99;
	    width: 35rpx;
		margin-left: 150rpx;
		margin-top: 15rpx;
	}
	.pushImg{
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.videourl{
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		// margin-left: 10rpx;
	}
	.iconn{
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin: 10rpx;
		background-color: #FFC18A;
		display: flex;
		// flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 80rpx;
		font-size: 40rpx;
	}
	.iconn_text{
		font-size: 27rpx;
		color: #7F090B;
	}
	.bottom{
	  background-color: #FFC18A;
	  // border-top: #93110A solid 1rpx;
	  position: fixed;
	  bottom: 0;
	  // left: 0;
	  height: 130rpx;
	  width: 100vw;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.bottom_but{
	  background-image: url(../../static/img/login_imgTwo.png);
	  background-repeat: no-repeat;
	  height: 100rpx;
	  background-size: 100% 100%;
	  width: 90%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: #FFC695;
	}

	.popup{
		background-color: #FFC18A;
		height: 600rpx;
		width: 100%;
		text-align: center;
	}
	.popup_title{
		width: 100%;
		height: 80rpx;
		padding-top: 50rpx;
	}
	.popup_number_box{
		margin-top: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.minus{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-left: 1rpx solid #93110A;
		border-bottom: 1rpx solid #93110A;
		border-top: 1rpx solid #93110A;
	}
	.number{
		width: 200rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #93110A;
	}
	.plus{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 1rpx solid #93110A;
		border-bottom: 1rpx solid #93110A;
		border-top: 1rpx solid #93110A;
	}


	/deep/.u-icon-plus{
		width: 100rpx !important;
		background-color: #93110A !important;
		margin-left: -6rpx !important;
		color: #FFC694 !important;
	}
	/deep/.u-icon-minus{
		width: 100rpx !important;
		background-color: #FFC18A !important;
		border-bottom: #93110A solid 1rpx !important;
		border-top: #93110A solid 1rpx !important;
		border-left: #93110A solid 1rpx !important;
		margin-right: -6rpx !important;
		color: #93110A !important;
	}
	/deep/.u-number-input{
		background-color: #FFC18A !important;
		border: #93110A solid 1rpx !important;
		height: 98rpx !important;

	}
	.popup_time{
		margin-top: 30rpx;
		color: #93110A;
		font-size: 25rpx;
	}
	.popup_bottom{
		display: flex;
		justify-content: center;
		margin-top: 90rpx;
		height: 100rpx;
		border-top: #93110A solid 1px;
	}
	.popup_bottom_left{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;

	}
	.popup_bottom_right{
		background-color: #93110A;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		color: #FFC18A;
	}
	.popup_title_textOne{
		font-size: 35rpx;
		font-weight: 550;
		margin-right: 15rpx;
	}
	.popup_title_textTwo{
		color: #93110A;
		font-size: 35rpx;
		font-weight: 550;
		margin-right: 15rpx;
	}


</style>
